﻿@model EquipmentStockListModel

@Html.HiddenFor(model => model.SearchCategoryId)

@{
    Layout = "~/Administration/Views/Shared/_AdminPopupLayout.cshtml";

    var popGridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().PopupGridPageSize;

    //page title
    ViewBag.Title = "设施设备";
}

@if (ViewBag.RefreshPage == true)
{
    <script type="text/javascript">
        try {window.opener.document.forms['@(ViewBag.formId)'].@(ViewBag.btnId).click();}
        catch (e) { }
        window.close();
    </script>
}

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.MaintenanceId)
    <div class="content-header clearfix">
        <h1 class="pull-left">
            设施设备
        </h1>
        <div class="pull-right">
            <button type="submit" name="save" class="btn bg-blue">
                <i class="fa fa-floppy-o"></i>
                @T("Admin.Common.Save")
            </button>
        </div>
    </div>

    <div class="content">
        <div class="form-horizontal">
            <div class="panel-group">
                <div class="panel panel-default panel-search panel-popup">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <div class="col-md-2 col-search">
                                        <div class="label-wrapper"><label class="control-label" for="SearchPlaceId" title="">巡检点</label></div>
                                        <div class="col-content">
                                            @Html.NopDropDownListFor(model => model.SearchPlaceId, Model.AvailablePlaces)
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-search">
                                        <div class="label-wrapper"><label class="control-label" for="SearchName" title="">名称</label></div>
                                        <div class="col-content">
                                            @Html.NopEditorFor(model => model.SearchName)
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-search">
                                        <div class="label-wrapper"><label class="control-label" for="SearchManufacturer" title="">品牌</label></div>
                                        <div class="col-content">
                                            @Html.NopEditorFor(model => model.SearchManufacturer)
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-search">
                                        <div class="label-wrapper"><label class="control-label" for="SearchSpecification" title="">规格型号</label></div>
                                        <div class="col-content">
                                            @Html.NopEditorFor(model => model.SearchSpecification)
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <button type="button" id="search-categories" class="btn btn-primary"><i class="fa fa-search"></i>@T("Admin.Common.Search")</button>
                                        <button type="button" id="cancel-categories" class="btn btn-default"><i class="fa fa-refresh"></i>重置</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <div class="col-md-2">
                                        <div id="treeView"></div>
                                        <input type="submit" id="btnRefreshTree" style="display: none" />
                                    </div>
                                    <div class="col-md-10">
                                        <div id="categories-grid"></div>
                                        <input type="submit" id="btnRefreshGrid" style="display: none" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <style type="text/css">
                            .li i {
                                display: none;
                            }

                            .li:hover i {
                                display: inline-block;
                            }

                            .fabtn {
                                padding-left: 5px;
                                font-size: 16px;
                            }

                            .stock {
                                cursor: pointer;
                                text-decoration: underline;
                            }

                            .warning {
                                color: red;
                            }
                        </style>
                        <script>
                    $(document).ready(function () {
                        $("#treeView").kendoTreeView({
                            dataSource: {
                                type: "json",
                                transport: {
                                    read: {
                                        url: "@Html.Raw(Url.Action("Tree", "EquipmentCategory"))",
                                        type: "POST",
                                        dataType: "json",
                                        data: additionalTreeData
                                    }
                                },
                                schema: {
                                    model: {
                                        id: "id",
                                        children: "items"
                                    }
                                }
                            },
                            //dataTextField: 'name'
                            template: function (dataItem) {
                                return `<div id="${dataItem.item.id}" class="li"><span id="text${dataItem.item.id}">${dataItem.item.text}</span></div>`;
                            },
                            select(e) {
                                const li = $(e.node).find('.li')[0];
                                if (li) {
                                    $('#@Html.FieldIdFor(model => model.SearchCategoryId)').val(li.id);
                                    $("#search-categories").click();
                                }
                                return false;
                            },
                            expand: function (e) {
                                return false;
                            }
                        });

                        $('#btnRefreshTree').click(function (a) {
                            //refresh grid
                            var tree = $("#treeView").data('kendoTreeView');
                            tree.dataSource.read();

                            //return false to don't reload a page
                            return false;
                        });

                        $("#categories-grid").kendoGrid({
                            dataSource: {
                                type: "json",
                                transport: {
                                    read: {
                                        url: "@Html.Raw(Url.Action("EquipmentList", "Maintenance"))",
                                        type: "POST",
                                        dataType: "json",
                                        data: additionalData
                                    },
                                },
                                schema: {
                                    data: "Data",
                                    total: "Total",
                                    errors: "Errors",
                                    model: {
                                        id:"Id",
                                        fields: {
                                            Name: { editable: false },
                                            Manufacturer: { editable: false },
                                            Specification: { editable: false },
                                            PlaceName: { editable: false },
                                            Location: { editable: false },
                                            StartOn: { editable: false, type: "date" },
                                        }
                                    }
                                },
                                error: function(e) {
                                    display_kendoui_grid_error(e);
                                    // Cancel the changes
                                    this.cancelChanges();
                                },
                                pageSize: @(popGridPageSize),
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true,
                                autoSync: true,
                                //aggregate: [
                                //    { field: "Stock", aggregate: "sum" },
                                //    { field: "Freeze", aggregate: "sum" }
                                //]
                            },
                            pageable: {
                                refresh: true,
                                @Html.Partial("_GridPagerMessages")
                            },
                            @*editable: {
                                confirmation: "@T("Admin.Common.DeleteConfirmation")",
                                mode: "inline"
                            },*@
                            scrollable: false,
                            columns: [{
                                field: "Id",
                                headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
                                headerAttributes: { style: "text-align:center" },
                                attributes: { style: "text-align:center" },
                                template: "<input type='checkbox' name='SelectedProductIds' value='#=Id#' class='checkboxGroups' #=Checked?'checked':''# />",
                                width: 50
                            },
                                {
                                    field: "Name",
                                    title: "名称",
                                    width: 300,
                                    headerAttributes: { style: "text-align:center" },
                                }, {
                                    field: "Manufacturer",
                                    title: "品牌",
                                    width: 200,
                                    headerAttributes: { style: "text-align:center" },
                                }, {
                                    field: "Specification",
                                    title: "规格型号",
                                    width: 300,
                                    headerAttributes: { style: "text-align:center" },
                                },{
                                    field: "Location",
                                    title: "使用区域具体位置",
                                    width: 400,
                                    headerAttributes: { style: "text-align:center" },
                                }, {
                                    field: "StartOn",
                                    title: "开始时间",
                                    width: 100,
                                    type: "date",
                                    format: "{0:yyyy/MM/dd}",
                                    headerAttributes: { style: "text-align:center" },
                                    attributes: { style: "text-align:center" },
                                }]
                        });

                        $('#btnRefreshGrid').click(function () {
                            //refresh grid
                            var grid = $("#categories-grid").data('kendoGrid');
                            grid.dataSource.read();

                            //return false to don't reload a page
                            return false;
                        });
                    });
                        </script>

                        <script type="text/javascript">
                        $(document).ready(function() {
                            //search button
                            $('#search-categories').click(function() {
                                //search
                                var grid = $('#categories-grid').data('kendoGrid');
                                grid.dataSource.page(1); //new search. Set page size to 1
                                //grid.dataSource.read(); we already loaded the grid above using "page" function
                                //clear selected checkboxes
                                $('.checkboxGroups').attr('checked', false).change();
                                return false;
                            });
                            //cancel button
                            $('#cancel-categories').click(function () {
                                //cancel
                                var grid = $('#categories-grid').data('kendoGrid');
                                $('#@Html.FieldIdFor(model => model.SearchPlaceId)').val('0');
                                $('#@Html.FieldIdFor(model => model.SearchCategoryId)').val('0');
                                $('#@Html.FieldIdFor(model => model.SearchName)').val('');
                                $('#@Html.FieldIdFor(model => model.SearchManufacturer)').val('');
                                $('#@Html.FieldIdFor(model => model.SearchSpecification)').val('');
                                grid.dataSource.page(1); //new search. Set page size to 1
                                //grid.dataSource.read(); we already loaded the grid above using "page" function

                                //refresh grid
                                var tree = $("#treeView").data('kendoTreeView');
                                tree.dataSource.read();
                                return false;
                            });

                            //wire up checkboxes
                            $('#mastercheckbox').click(function () {
                                $('.checkboxGroups').attr('checked', $(this).is(':checked')).change();
                            });

                            $('#categories-grid').on('change', 'input[type=checkbox][id!=mastercheckbox][class=checkboxGroups]', function (e) {
                                updateMasterCheckbox();
                            });

                        $("#@Html.FieldIdFor(model => model.SearchPlaceId)").change(function(){
                            var selectedItem = $(this).val();
                            $('#@Html.FieldIdFor(model => model.SearchPlaceId)').val(selectedItem);

                            //refresh grid
                            var tree = $("#treeView").data('kendoTreeView');
                            tree.dataSource.read();
                        });

                            $("#@Html.FieldIdFor(model => model.SearchName)").keydown(function(event) {
                                if (event.keyCode == 13) {
                                    $("#search-categories").click();
                                    return false;
                                }
                            });

                            $("#@Html.FieldIdFor(model => model.SearchManufacturer)").keydown(function(event) {
                                if (event.keyCode == 13) {
                                    $("#search-categories").click();
                                    return false;
                                }
                            });

                            $("#@Html.FieldIdFor(model => model.SearchSpecification)").keydown(function(event) {
                                if (event.keyCode == 13) {
                                    $("#search-categories").click();
                                    return false;
                                }
                            });
                        });

                        function additionalData() {
                            var data = {
                                MaintenanceId:@Model.MaintenanceId,
                                SearchCategoryId: $('#@Html.FieldIdFor(model => model.SearchCategoryId)').val(),
                                SearchPlaceId: $('#@Html.FieldIdFor(model => model.SearchPlaceId)').val(),
                                SearchName: $('#@Html.FieldIdFor(model => model.SearchName)').val(),
                                SearchManufacturer: $('#@Html.FieldIdFor(model => model.SearchManufacturer)').val(),
                                SearchSpecification: $('#@Html.FieldIdFor(model => model.SearchSpecification)').val(),
                            };
                            addAntiForgeryToken(data);
                            return data;
                        }

                        function additionalTreeData() {
                            var data = {
                                SearchPlaceId: $('#@Html.FieldIdFor(model => model.SearchPlaceId)').val(),
                                isConsumables: false
                            };
                            addAntiForgeryToken(data);
                            return data;
                            }

                            function updateMasterCheckbox() {
                                var numChkBoxes = $('#categories-grid input[type=checkbox][id!=mastercheckbox][class=checkboxGroups]').length;
                                var numChkBoxesChecked = $('#categories-grid input[type=checkbox][id!=mastercheckbox][class=checkboxGroups]:checked').length;
                                $('#mastercheckbox').attr('checked', numChkBoxes == numChkBoxesChecked && numChkBoxes > 0);
                            }

                        </script>
                    </div>
                    @*<div class="panel-footer">
                            <button type="submit" name="save" class="btn bg-blue">
                                <i class="fa fa-floppy-o"></i>
                                @T("Admin.Common.Save")
                            </button>
                        </div>*@
                </div>
            </div>
        </div>
    </div>
}
